import React, { memo, useState, useTransition } from 'react'
import nameArray from './namesArray'

export default memo(function App() {
  const [showName, setShowName] = useState(nameArray)
  const [pending, startTransition] = useTransition()

  function valueChangeHandle(e) {
    startTransition(() => {
      const keyword = e.target.value
      const filterShowNames = nameArray.filter((item) => item.includes(keyword))
      setShowName(filterShowNames)
    })
  }

  return (
    <div>
      <input type="text" onInput={valueChangeHandle} />
      <h2>用户名的列表: {pending && <span>laoding...</span>}</h2>
      <ul>
        {showName.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </div>
  )
})
